<template>
  <view class="register">
    <image class="blogo" src="../../static/blogo.png" mode="widthFix"></image>
    <view class="from">
      <u-form :model="form" ref="uForm">
        <u-form-item label="账户" prop="username">
          <u-input v-model="form.username" placeholder="请输入手机号" />
        </u-form-item>
        <u-form-item label="密码" prop="password">
          <u-input type="password" v-model="form.password" placeholder="请设置密码" />
        </u-form-item>
      </u-form>
      <u-button @click="submit" class="btn" type="primary" shape="circle">注册</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          mobile: '',
          password: ''
        },
        rules: {
          username: [{
              required: true,
              message: '请填写手机号',
              // 可以单个或者同时写两个触发验证方式
              trigger: ['blur', 'change']
            },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '手机格式不正确',
              trigger: 'blur'
            }, {
              type: 'number'
            }
          ],
          password: [{
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码至少包含 数字和英文，长度6-20',
              trigger: 'blur'
            },
            {
              required: true,
              message: '请设置密码',
              trigger: ['blur', 'change']
            }
          ]
        }
      };
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },

    onLoad() {},
    methods: {
      submit() {
        const {
          username,
          password
        } = this.form
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uniCloud.callFunction({
              name: 'register',
              data: {
                username,
                password
              },
              success(res) {
                if (res.result.code === 0) {
                  uni.setStorageSync('uni_id_token', res.result.token)
                  uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
                  uni.showToast({
                    title: '注册成功',
                    icon: 'none'
                  })
                } else {
                  uni.showModal({
                    content: res.result.message,
                    showCancel: false
                  })
                  return
                }
                setTimeout(() => {
                  uni.navigateTo({
                    url: '../login/login'
                  });
                }, 2000)
              },
              fail() {
                uni.showModal({
                  content: '注册失败，请稍后再试',
                  showCancel: false
                })
              }
            })
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .register {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #92B6DE;

    .blogo {
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 30px auto;
    }

    .from {
      width: 80vw;
      height: 200px;
      padding: 20px;
      margin: 0 auto;
      margin-top: 120px;
      color: #fff;

      .btn {
        margin-top: 30px;
      }
    }

    .uni-input-input {
      color: #fff !important;
    }
  }
</style>
